<template>
  <div class="orderconfig">
    <div class="orderleft">
      <div class="configcenter">
        <div class="title">订单</div>
        <div class="baseconfig">基础配置</div>
      </div>
    </div>
    <div class="ordercenter">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-position="left"
      >
        <el-form-item label="未支付订单定时关闭设置：" prop="unPayCloseTime">
          <el-input
            v-model="ruleForm.unPayCloseTime"
            placeholder=""
            class="input"
          ></el-input>
          分钟，后自动关闭。
        </el-form-item>
        <!-- <el-form-item label="超时未派单订单/工单自动取消设置：" prop="timeoutOrderCancelStatus">
          <el-switch
            :value="ruleForm.timeoutOrderCancelStatus === 0"
            active-text="开启"
            inactive-text="关闭">
          </el-switch>
        </el-form-item> -->
        <div style="display:flex">
          <el-form-item label="取消/关闭订单设置：" prop="orderDeleteTime">
            <el-input
              v-model="ruleForm.orderDeleteTime"
              placeholder=""
              class="input"
            ></el-input>
            <span>天，后自动删除。</span>
          </el-form-item>
          <el-form-item prop="orderDeleteTimeStatus">
            <el-switch
              :value="ruleForm.orderDeleteTimeStatus === 0"
              active-text="开启"
              inactive-text="关闭"
              @change="changeStatus"
            >
            </el-switch>
          </el-form-item>
        </div>
        <el-form-item label="服务完成后：" prop="autoCommonTime">
          <el-input
            v-model="ruleForm.autoCommonTime"
            placeholder=""
            class="input"
          ></el-input>
          <span>天后用户未评论，系统将自动好评</span>
        </el-form-item>
        <div style="display:flex;">
          <el-form-item
            label="服务人数/时长配置：每单可服务最多人数"
            prop="orderServerMaxNumberCode"
            class="te"
          >
            <el-select
              v-model="ruleForm.orderServerMaxNumberCode"
              placeholder="请选择"
            >
              <el-option
                v-for="item in servePeopleOptions"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="orderServerMaxTimeCode">
            <span>每单可服务最大时长</span>
            <el-select
              v-model="ruleForm.orderServerMaxTimeCode"
              placeholder="请选择"
            >
              <el-option
                v-for="item in serveTimeOptions"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item
          label="用户可下单时间配置：依据用户当前时间起"
          prop="placeOrderTime"
        >
          <el-input
            v-model="ruleForm.placeOrderTime"
            placeholder=""
            class="input"
          ></el-input>
          小时后，可下单。
        </el-form-item>
        <!-- 以下配置暂时删除 -->
        <!-- <el-form-item label="用户可预约时间周期配置：自当前日期算起" prop="userAppointmentTime">
          <el-input v-model="ruleForm.userAppointmentTime" placeholder="" class="input"></el-input> 天，为用户可预约时间周期。
        </el-form-item> -->
        <el-form-item
          label="关联专项可用配置:保洁或者家务师周期卡次数使用超过"
          prop="cardUsage"
        >
          <el-input
            v-model="ruleForm.cardUsage"
            placeholder=""
            class="input"
          ></el-input>
          %，可使用关联的专项。
        </el-form-item>
        <el-form-item label="次付续费提醒:">
          <span>每次支付的服务排班倒数第</span>
          <el-input
            v-model="ruleForm.renewalCountdown"
            placeholder=""
            class="input"
          ></el-input>
          <span>天，提醒用户</span>
          <el-input
            v-model="ruleForm.renewalCountdownCopy"
            placeholder="输入提醒文案"
            class="input text tipTextInput"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="orderright">
      <div class="save" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    systemConfigOrderVo: {
      type: Object,
      required: false
    }
  },
  data() {
    const servePeopleOptions = [
      { code: "1", value: "1人" },
      { code: "2", value: "2人" }
      // {code:'3',value:'3人'},
      // {code:'4',value:'4人'},
      // {code:'5',value:'5人'},
      // {code:'6',value:'6人'},
      // {code:'7',value:'7人'},
      // {code:'8',value:'8人'}
    ];
    const serveTimeOptions = [
      { code: "1", value: "1小时" },
      { code: "2", value: "2小时" },
      { code: "3", value: "3小时" },
      { code: "4", value: "4小时" },
      { code: "5", value: "5小时" },
      { code: "6", value: "6小时" },
      { code: "7", value: "7小时" },
      { code: "8", value: "8小时" },
      { code: "9", value: "9小时" },
      { code: "10", value: "10小时" },
      { code: "11", value: "11小时" },
      { code: "12", value: "12小时" }
    ];
    const validNum = (rule, value, callback) => {
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      }
      callback();
    };
    return {
      ruleForm: {
        autoCommonTime: "", //
        configType: "system_config_order",
        orderDeleteTime: "", //
        orderDeleteTimeStatus: 1, //
        orderServerMaxNumberCode: "", //
        orderServerMaxTimeCode: "", //
        placeOrderTime: "", //
        timeoutOrderCancelStatus: 0,
        unPayCloseTime: "", //
        userAppointmentTime: "", //
        cardUsage: "",
        renewalCountdown: "", // 每次支付的服务排班倒数第几天
        renewalCountdownCopy: "" // 提示文案
      },
      servePeopleOptions,
      serveTimeOptions,
      rules: {
        // unPayCloseTime: [
        //   { validator: validNum, trigger: 'change', message: '请输入数字'}
        // ],
        // orderDeleteTime: [
        //   { validator: validNum, trigger: 'change', message: '请输入数字'}
        // ],
        // autoCommonTime: [
        //   { validator: validNum, trigger: 'change', message: '请输入数字'}
        // ],
        // placeOrderTime: [
        //   { validator: validNum, trigger: 'change', message: '请输入数字'}
        // ]
      }
    };
  },
  methods: {
    vaildate() {
      let flag = true;
      if (this.ruleForm.unPayCloseTime != "") {
        const num = Number(this.ruleForm.unPayCloseTime);
        if (isNaN(num)) {
          flag = false;
          this.$message.error("未支付订单定时关闭时间必须为数字");
          return false;
        }
      }
      if (this.ruleForm.orderDeleteTime != "") {
        const num = Number(this.ruleForm.orderDeleteTime);
        if (isNaN(num)) {
          flag = false;
          this.$message.error("取消/关闭订单自动删除时间必须为数字");
          return false;
        }
      }
      if (this.ruleForm.autoCommonTime != "") {
        const num = Number(this.ruleForm.autoCommonTime);
        if (isNaN(num)) {
          flag = false;
          this.$message.error("服务完成后用户未评论自动好评时间必须为数字");
          return false;
        }
      }
      if (this.ruleForm.placeOrderTime != "") {
        const num = Number(this.ruleForm.placeOrderTime);
        if (isNaN(num)) {
          flag = false;
          this.$message.error("用户可下单时间配置必须为数字");
          return false;
        }
        // 校验数字为正整数和一位小数
        const str = this.ruleForm.placeOrderTime;
        const reg = /^[0-9]+([.]{1}[0-9]{1})?$/;
        if (!reg.test(str)) {
          flag = false;
          this.$message.error("用户可下单时间配置必须为非负整数或非负一位小数");
          return false;
        }
      }
      // if (this.ruleForm.userAppointmentTime != "") {
      //   const num = Number(this.ruleForm.userAppointmentTime);
      //   if (isNaN(num)) {
      //     flag = false;
      //     this.$message.error("用户可预约时间周期配置必须为数字");
      //   }
      // }
      if (this.ruleForm.cardUsage != "") {
        // 正整数
        const num = Number(this.ruleForm.cardUsage);
        if (isNaN(num)) {
          flag = false;
          this.$message.error("关联专项可用配置必须为数字");
          return false;
        }
        const reg = /^\d+$/;
        if (!reg.test(this.ruleForm.cardUsage)) {
          this.$message.error("关联专项可用配置必须正整数");
          flag = false;
          return false;
        }
      }
      if (this.ruleForm.renewalCountdown != "") {
        const num = Number(this.ruleForm.renewalCountdown);
        if (isNaN(num)) {
          flag = false;
          this.$message.error("次付续费提醒配置必须为数字");
          return false;
        }
        const reg = /^\d+$/;
        if (!reg.test(this.ruleForm.renewalCountdown)) {
          this.$message.error("次付续费提醒配置必须正整数");
          flag = false;
          return false;
        }
      }
      return flag;
    },
    async save() {
      const flag = this.vaildate();
      if (!flag) return;
      const data = {
        systemConfigOrderVo: {
          configType: "system_config_order",
          unPayCloseTime: Number(this.ruleForm.unPayCloseTime),
          orderDeleteTime: Number(this.ruleForm.orderDeleteTime),
          orderDeleteTimeStatus: this.ruleForm.orderDeleteTimeStatus,
          autoCommonTime: Number(this.ruleForm.autoCommonTime),
          orderServerMaxNumberCode: this.ruleForm.orderServerMaxNumberCode,
          orderServerMaxTimeCode: this.ruleForm.orderServerMaxTimeCode,
          placeOrderTime: Number(this.ruleForm.placeOrderTime),
          userAppointmentTime: Number(this.ruleForm.userAppointmentTime),
          cardUsage: Number(this.ruleForm.cardUsage),
          renewalCountdown: Number(this.ruleForm.renewalCountdown),
          renewalCountdownCopy: this.ruleForm.renewalCountdownCopy
        }
      };
      if (this.ruleForm.id) {
        data.systemConfigOrderVo.id = this.ruleForm.id;
      }
      await this.$http({
        url: "/hsssystemadmin/config/system/updateSystemConfig",
        method: "POST",
        data
      }).then(res => {
        const { success, errorMsg } = res
        if(success == 1) {
          this.$message.success("订单基础配置保存成功");
          this.$emit("research");
        } else {
          this.$message.error(errorMsg)
        }
      });
    },
    changeStatus(value) {
      if (value) {
        this.ruleForm.orderDeleteTimeStatus = 0;
      }
      if (!value) {
        this.ruleForm.orderDeleteTimeStatus = 1;
      }
    }
  },
  watch: {
    systemConfigOrderVo(newvalue) {
      if (newvalue) {
        this.ruleForm = newvalue;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.orderconfig {
  display: flex;
  // align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .orderleft {
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .configcenter {
      width: 100px;
      height: 70px;
      .title {
        height: 35px;
        text-align: center;
        background-color: #f56a23;
        font-size: 22px;
        color: #fff;
        line-height: 35px;
      }
      .baseconfig {
        height: 35px;
        text-align: center;
        font-size: 22px;
        color: #aaa;
      }
    }
  }
  .orderright {
    background-color: #fff;
    width: 150px;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    .save {
      width: 70px;
      height: 40px;
      background-color: #00cb75;
      font-size: 22px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      cursor: pointer;
    }
  }
  .ordercenter {
    /deep/ .el-switch__label * {
      font-size: 12px;
    }
    /deep/ .el-form-item {
      .el-form-item__content {
        font-size: 12px;
      }
      .el-form-item__label {
        font-size: 12px;
      }
    }
    flex: 1;
    min-height: 150px;
    background-color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    padding: 20px;
    box-sizing: border-box;
    div {
      margin-bottom: 5px;
    }
    /deep/ .input {
      font-size: 12px;
      text-align: center;
      width: 60px;
      height: 30px;
      box-sizing: border-box;
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
    /deep/ .input.text {
      font-size: 12px;
      text-align: center;
      width: 100px;
      height: 30px;
      box-sizing: border-box;
      .el-input__inner {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
    /deep/ .el-select {
      width: 102px;
      height: 30px;
      box-sizing: border-box;
      font-size: 12px;
      .el-input__inner {
        width: 102px;
        height: 30px;
        box-sizing: border-box;
        padding: 0 30px 0 15px;
        text-align: center;
        font-size: 12px;
      }
    }
    /deep/ .el-form-item.te {
      .el-form-item__content {
        width: 360px;
      }
    }
  }
}
/deep/ .tipTextInput {
  width: 200px !important;
}
</style>
